<template>
  <!-- 检查记录 -->
  <view class="newCar">
    <view class="ins" v-for="(item,index) in inspReList" :key="index" v-if="detailstrue">
      <view class="insbox">
        <view class="font-36 color-333 font-bold">
          {{item.shopTime}}到店
        </view>
        <!-- 预检 -->
        <view class="insbord flex flex-jc-sb flex-ai-c" @click="preClick(item)" v-if="item.yj !== null">
          <view class="mt-20 font-24 color-666 mr-20" style="width: 100%;">
            <view class="1234">
              {{item.yj.name}}
            </view>
            <view class="flex flex-ai-c mt-20">
              <view class="normal mr-20">
                正常 ({{item.yj.normal}})
              </view>
              <view class="abnormal mr-20">
                异常 ({{item.yj.abnormal}})
              </view>
              <view class="normal">
                未检测 ({{item.yj.didNotDetect}})
              </view>
            </view>
            <view class="flex flex-ai-c mt-20">
              <view class="normal mr-20">
                已修复 ({{item.yj.didNotDetect}})
              </view>
              <view class="normal">
                未修复 ({{item.yj.noRepairNum}})
              </view>
            </view>
            <view class="mt-15 font-24 color-999 mb_15">
              {{item.yj.startTime}}
            </view>
          </view>
          <view class="1234">
            <u-icon name="arrow-right" color="#9A9A9A" size="25rpx"></u-icon>
          </view>
        </view>
        <!-- 上检 -->
        <view class="insbord flex flex-jc-sb flex-ai-c" @click="insClick(item)" v-if="item.sj !== null">
          <view class="mt-20 font-24 color-666 mr-20" style="width: 100%;">
            <view class="1234">
              {{item.sj.name}}
            </view>
            <view class="flex flex-ai-c mt-20">
              <view class="normal mr-20">
                正常 ({{item.sj.normal}})
              </view>
              <view class="abnormal mr-20">
                异常 ({{item.sj.abnormal}})
              </view>
              <view class="normal">
                未检测 ({{item.sj.didNotDetect}})
              </view>
            </view>
            <view class="flex flex-ai-c mt-20">
              <view class="normal mr-20">
                已修复 ({{item.sj.didNotDetect}})
              </view>
              <view class="normal">
                未修复 ({{item.sj.noRepairNum}})
              </view>
            </view>
            <view class="mt-15 font-24 color-999 mb_15">
              {{item.sj.startTime}}
            </view>
          </view>
          <view class="1234">
            <u-icon name="arrow-right" color="#9A9A9A" size="25rpx"></u-icon>
          </view>
        </view>
        <!-- 质检 -->
        <view class="insbord flex flex-jc-sb flex-ai-c" @click="repClick(item)" v-if="item.zj !== null">
          <view class="mt-20 font-24 color-666 mr-20" style="width: 100%;">
            <view class="1234">
              {{item.zj.name}}
            </view>
            <view class="flex flex-ai-c mt-20">
              <view class="normal mr-20">
                已修复 ({{item.zj.didNotDetect}})
              </view>
              <view class="normal mr-20">
                未修复 ({{item.zj.noRepairNum}})
              </view>
              <view class="normal">
                无需修复 ({{item.zj.noNeedRepairNum}})
              </view>
            </view>
            <view class="mt-15 font-24 color-999 mb_15">
              {{item.zj.startTime}}
            </view>
          </view>
          <view class="1234">
            <u-icon name="arrow-right" color="#9A9A9A" size="25rpx"></u-icon>
          </view>
        </view>
        <!-- 交车报告 -->
        <view class="insbord flex flex-jc-sb flex-ai-c" @click="deyClick(item)" v-if="item.jc !== null">
          <view class="mt-20 font-24 color-666 mr-20" style="width: 100%;">
            <view class="1234">
              交车报告
            </view>
            <view class="mt-15 font-24 color-999 mb_15">
              {{item.zj.startTime}}
            </view>
          </view>
          <view class="1234">
            <u-icon name="arrow-right" color="#9A9A9A" size="25rpx"></u-icon>
          </view>
        </view>
      </view>
      <u-gap height="12" bg-color="#F6F6F6"></u-gap>
    </view>
    <advanceReport :tabindex="currentone" :inspectstate="inspectstate" :orderStoreId="orderStoreId" v-if="!detailstrue"
      :isFixedTop="isFixedTopss" />
    <view>
      <!-- 默认图 -->
      <defaultImg :show="defaultImg" msg="暂无记录"></defaultImg>
    </view>
  </view>
</template>

<script>
  import advanceReport from './advanceReport.vue' //基本信息
  import defaultImg from '@/components/defaultImg/defaultImg.vue' //默认图片组件
  export default {
    components: {
      advanceReport,
      defaultImg
    },
    props: {
      tabIndex: {
        type: [Number, String],
        default: 0
      },
      inspectstate: {
        type: [Number, String],
        default: 0
      },
      orderid: {
        type: [String, Number],
        default: ''
      },
      carid: {
        type: String,
        default: ''
      },
      isFixedTop: {
        type: Boolean,
        default: ''
      }
    },
    watch: {
      tabIndex(newVal, oldVal) {
        if (newVal === 3) {
          this.cuttnum = newVal
          if (this.caridone) {
            this.GetRecordList(this.caridone)
          }
          this.detailstrue = true //切换到检查记录列表后 显示检查记录列表
        }
      },
      inspectstate(newVal, oldVal) {
        let values = Number(newVal)
        if (values === 3) {
          this.detailstrue = true
        } else {
          this.currentone = values
          this.detailstrue = false
        }
      },
      orderid(newVal, oldVal) {
        this.orderStoreId = newVal
      },
      isFixedTop(newVal) {
        this.isFixedTopss = newVal
      },
      carid(e) {
        // 车子id不为空
        this.caridone = e
        if (this.cuttnum === 3) {
          if (e) {
            this.GetRecordList(e)
          }
        }
      }
    },
    data() {
      return {
        caridone: '', //车id,
        cuttnum: 0,
        currentone: 0,
        detailstrue: true, //是否点击列表
        inspReList: [],
        defaultImg: false, //默认图
        orderStoreId: '', //预检id//上检id//质检id
        isFixedTopss: false,
      }
    },
    created() {
      uni.$on('storeLoadMore', data => {
        if (data === 0) {
          console.log(1232)
        }
      })
      this.cuttnum = this.tabIndex

      // 页面滚动条监听
      // uni.$on('storePageScroll', data => {
      //   this.judgeFixed()
      // })
    },
    methods: {
      // 判断是否到吸顶
      // judgeFixed() {
      //   uni.createSelectorQuery().select('.menu-tab').boundingClientRect((data) => {
      //     this.menuFixed = data.top <= this.navbarHeight ? true : false
      //   }).exec()
      // },

      async GetRecordList() {
        try {
          let data = {
            pageIndex: 1,
            pageSize: 10,
            carId: this.caridone
          }
          const res = await this.$api.commodity.GetRecordList(data)
          res.data.list.forEach(item => {
            item.shopTime = item.shopTime.split('T')[0]
            if (item.yj !== null) {
              item.yj.startTime = item.yj.startTime.split('T')[0] + ' ' + item.yj.startTime.split('T')[1]
            }
            if (item.sj !== null) {
              let newStr = item.sj.startTime.split('T')
              item.sj.startTime = newStr[0] + ' ' + newStr[1]
            }
            if (item.zj !== null) {
              let newStr = item.zj.startTime.split('T')
              item.zj.startTime = newStr[0] + ' ' + newStr[1]
            }
          })
          this.inspReList = res.data.list

          if (res.data.total === 0) {
            this.defaultImg = true
          } else {
            this.defaultImg = false
          }

        } catch (e) {
          console.log(e)
        }
      },
      preClick(data) {
        this.orderStoreId = data.order_Arrive_Store_Id
        this.detailstrue = false
        this.currentone = 0
      },
      insClick(data) {
        this.orderStoreId = data.order_Arrive_Store_Id
        this.detailstrue = false
        this.currentone = 1
      },
      repClick(data) {
        this.orderStoreId = data.order_Arrive_Store_Id
        this.detailstrue = false
        this.currentone = 2
      },
      deyClick(data) {
        this.orderStoreId = data.order_Arrive_Store_Id
        this.detailstrue = false
        this.currentone = 3
      },
    }
  }
</script>

<style lang="scss" scoped>
  .newCar {
    height: 85vh;
  }

  .ins {
    .insbox {
      padding: 20rpx 33rpx;

      .insbord {
        border-bottom: 1px solid #EEEEEE;
      }

      .insbord:last-child {
        border-bottom: 0;
      }

      .abnormal {
        padding: 0rpx 14rpx;
        height: 38rpx;
        background: #FEF1F0;
        border-radius: 5rpx;
        text-align: center;
        line-height: 38rpx;
        color: #FF4B44;
      }

      .normal {
        padding: 0rpx 14rpx;
        height: 38rpx;
        background: #EEEEEE;
        border-radius: 5rpx;
        text-align: center;
        line-height: 38rpx;
      }
    }
  }
</style>
